---
title: Close Button
description: A button component specifically designed for closing modals and overlays.
metaDescription: Close Button component for React and Solid.js designed for dismissing modals, dialogs, and overlays. Accessible and customizable closing interactions.
category: buttons
links:
  recipe: https://github.com/cschroeter/park-ui/blob/next/packages/preset/src/recipes/button.ts
---

<ComponentExample name="basic" />

## Installation

<InstallationGuide />

## Usage

```tsx
import { CloseButton } from '@/components/ui'
```

```tsx
<CloseButton />
```

## Examples

### Sizes

Use the `size` prop to change the size of the close button.

<ComponentExample name="sizes" />

### Variants

Use the `variant` prop to change the appearance of the close button.

<ComponentExample name="variants" />

### Custom Icon

Pass the custom icon to the `children` of the close button component.

<ComponentExample name="custom-icon" />

## Props

<PropsTable />